<template>
  <div class="order-container">
    <h3>历史订单</h3>
    <div class="filter-container">
      <el-input 
        v-model="listQuery.keyword" 
        placeholder="搜索订单号/客户名称"
        style="width: 300px"
        clearable 
        @keyup.enter="getList" 
      />
      <el-button type="primary" style="margin-left: 10px" @click="getList">
        搜索 
      </el-button>
    </div>
 
    <el-table 
      :data="list"
      border
      fit 
      highlight-current-row
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column label="订单号" prop="orderNo" width="180" />
      <el-table-column label="客户名称" prop="customer" width="120" />
      <el-table-column label="订单金额" prop="amount" width="120" align="right">
        <template #default="{ row }">
          ¥{{ row.amount.toFixed(2)  }}
        </template>
      </el-table-column>
      <el-table-column label="下单时间" prop="createTime" width="180" />
      <el-table-column label="订单状态" prop="status" width="120">
        <template #default="{ row }">
          <el-tag :type="row.status  === '已完成' ? 'success' : 'danger'">
            {{ row.status  }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="handleDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
 
    <div class="pagination-container">
      <el-pagination 
        :current-page="listQuery.page" 
        :page-size="listQuery.size" 
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
 
const list = ref([])
const total = ref(0)
const listQuery = ref({
  page: 1,
  size: 10,
  keyword: ''
})
 
const getList = async () => {
  try {
    const res = await axios.post('/api/orders/history',  listQuery.value) 
    list.value  = res.data.data.list 
    total.value  = res.data.data.total  
  } catch (error) {
    console.error(' 获取历史订单失败:', error)
  }
}
 
const handleSizeChange = (val) => {
  listQuery.value.size  = val
  getList()
}
 
const handleCurrentChange = (val) => {
  listQuery.value.page  = val 
  getList()
}
 
const handleDetail = (row) => {
  console.log(' 查看订单详情:', row)
  // 这里可以跳转到详情页 
}
 
onMounted(getList)
</script>
 
<style scoped>
.order-container {
  padding: 20px;
}
.filter-container {
  margin-bottom: 20px;
}
.pagination-container {
  margin-top: 20px;
  text-align: center;
}
</style>